import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

interface MenuItem {
  label: string;
  value: string;
  disabled?: boolean;
  children?: MenuItem[];
}

/**
 * Menu菜单组件
 * @element zss-menu
 * @slot - 菜单项插槽
 */
@customElement('zss-menu')
export class ZssMenu extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
    
    .menu {
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #fff;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
    }
    
    .menu-item {
      position: relative;
      padding: 12px 20px;
      cursor: pointer;
      transition: background-color 0.2s;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .menu-item:last-child {
      border-bottom: none;
    }
    
    .menu-item:hover {
      background-color: #f5f7fa;
    }
    
    .menu-item.selected {
      background-color: #ecf5ff;
      color: #409eff;
    }
    
    .menu-item.disabled {
      color: #c0c4cc;
      cursor: not-allowed;
    }
    
    .menu-item.disabled:hover {
      background-color: transparent;
    }
    
    .submenu {
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #fafafa;
    }
    
    .submenu .menu-item {
      padding-left: 40px;
    }
    
    .menu-item.has-children::after {
      content: '▶';
      position: absolute;
      right: 20px;
      transition: transform 0.2s;
    }
    
    .menu-item.has-children.expanded::after {
      transform: rotate(90deg);
    }
    
    /* 水平菜单样式 */
    :host([mode="horizontal"]) .menu {
      display: flex;
      border: none;
      border-bottom: 1px solid #e4e7ed;
      border-radius: 0;
    }
    
    :host([mode="horizontal"]) .menu-item {
      border-bottom: none;
      border-right: 1px solid #f0f0f0;
    }
    
    :host([mode="horizontal"]) .menu-item:last-child {
      border-right: none;
    }
    
    :host([mode="horizontal"]) .submenu {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 160px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      z-index: 1000;
    }
  `;

  /**
   * 菜单模式
   * @attr mode
   */
  @property({ type: String })
  mode: 'vertical' | 'horizontal' = 'vertical';

  /**
   * 当前选中的菜单项
   * @attr value
   */
  @property({ type: String })
  value = '';

  /**
   * 菜单数据
   */
  @property({ type: Array })
  items: MenuItem[] = [];

  /**
   * 展开的子菜单
   */
  @state()
  private expandedItems = new Set<string>();

  private handleItemClick(item: MenuItem): void {
    if (item.disabled) return;

    if (item.children && item.children.length > 0) {
      // 切换子菜单展开状态
      if (this.expandedItems.has(item.value)) {
        this.expandedItems.delete(item.value);
      } else {
        this.expandedItems.add(item.value);
      }
      this.requestUpdate();
    } else {
      // 选择菜单项
      this.value = item.value;
      this.dispatchEvent(new CustomEvent('select', { 
        detail: { value: this.value } 
      }));
    }
  }

  private isItemSelected(item: MenuItem): boolean {
    return item.value === this.value;
  }

  private isItemExpanded(item: MenuItem): boolean {
    return this.expandedItems.has(item.value);
  }

  private hasChildren(item: MenuItem): boolean {
    return !!(item.children && item.children.length > 0);
  }

  private renderMenuItem(item: MenuItem): unknown {
    const hasChildren = this.hasChildren(item);
    const isSelected = this.isItemSelected(item);
    const isExpanded = this.isItemExpanded(item);

    return html`
      <li 
        class="menu-item ${hasChildren ? 'has-children' : ''} ${isSelected ? 'selected' : ''} ${item.disabled ? 'disabled' : ''} ${isExpanded ? 'expanded' : ''}"
        @click=${() => this.handleItemClick(item)}
      >
        ${item.label}
        
        ${hasChildren && isExpanded ? html`
          <ul class="submenu">
            ${item.children!.map(child => this.renderMenuItem(child))}
          </ul>
        ` : ''}
      </li>
    `;
  }

  render() {
    return html`
      <ul class="menu">
        ${this.items.map(item => this.renderMenuItem(item))}
      </ul>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-menu': ZssMenu;
  }
}